<template>
	<view v-if="!readonly" style="width: 100%;">
		<view style="width: 100%;display: flex;flex-direction: row;">
			<view class="w-form-title"
				style="width:120rpx;padding-right:0.5rem;text-align: right;font-size:0.75rem !important;line-height:70rpx;">
				{{ $t('webAuto.fullName') }}</view>
			<view class="flex-1-div">
				<click-input :value="_value" index="name" @click="showOrgPicker" :disabled="readonly"
					:placeholder="props.formProps.placeholder || $t('webAuto.selectPersonnel')" pre-icon="personadd"
					style="line-height:40rpx;">
					<view style="flex: 1; display: flex; align-items: center;" v-for="user in _value || []"
						:key="user.id">
						<avatar :name="user.name" :src="user.avatar" :size="25" :showName="false" />
						<text style="margin-left: 5px;">{{ user.name }}</text>
					</view>
				</click-input>
			</view>
		</view>
		<view style="margin: 0 0 0 10rpx;" v-for="user in _value" :key="user.id">
			<view style="width: 100%;display: flex;flex-direction: row;">
				<view class="w-form-title"
					style="width:110rpx;padding-right:0.5rem;text-align: right;font-size:0.75rem !important;line-height:70rpx;">
					{{ $t('webAuto.workNumber') }}</view>
				<view class="flex-1-div">
					<uni-easyinput type="text" :inputBorder="true" v-model="user.id"
						:placeholder="$t('webAuto.SelectPersonnel')" disabled />
				</view>
			</view>
			<view style="width: 100%;display: flex;flex-direction: row;margin: 10rpx 0;" v-if="user.deptName">
				<view class="w-form-title"
					style="width:110rpx;padding-right:0.5rem;text-align: right;font-size:0.75rem !important;line-height:70rpx;">
					{{ $t('webAuto.department') }}</view>
				<view class="flex-1-div">
					<uni-easyinput type="text" style="color:black" :inputBorder="true" v-model="user.deptName"
						:placeholder="$t('webAuto.SelectPersonnel')" disabled />
				</view>
			</view>
		</view>
		<!-- 弹框 -->
		<org-picker ref="orgPicker" :position="position" :multiple="props.formProps.multiple" type="user"
			:selected="_value" @ok="selectOk"></org-picker>
	</view>
	<view v-else style="margin-bottom: 10rpx;">
		<view v-for="user in _value" :key="user.id">
			<view>
				<view style="line-height: 70rpx;margin-bottom:10rpx" class="flex-div ">
					<view class="text-color w-form-title" style="margin-right: 18rpx;width:5.625rem">
						{{ $t('webAuto.fullName') }}</view>
					<view class=" w-form-input-rv flex-1-div">{{ user.name }}</view>
				</view>
				<view style="line-height:70rpx;margin-bottom:10rpx" class="flex ">
					<view class="text-color w-form-title" style="margin-right: 18rpx;width:5.625rem">
						{{ $t('webAuto.workNumber') }}</view>
					<view class="w-form-input-rv flex-1-div">{{ user.id }}</view>
				</view>
				<view style="line-height: 70rpx;" class="flex " v-if="user.deptName">
					<view class="text-color w-form-title" style="margin-right: 18rpx;width:5.625rem">
						{{ $t('webAuto.department') }}</view>
					<view class="w-form-input-rv flex-1-div">{{ user.deptName }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import OrgPicker from '@/components/OrgPicker.vue'
import Avatar from '@/components/Avatar.vue'
import ClickInput from '@/components/ClickInput.vue'

const props = defineProps({
	formProps: {
		type: Object,
		default: () => {
			return {}
		}
	},
	modelValue: Array,
	readonly: Boolean,
	position: {
		type: String,
		default: 'right'
	}
})

const _value = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		emits('update:modelValue', val)
	}
})

onMounted(() => {
	let people = uni.getStorageSync('loginUser')
	if (!people || Object.keys(people).length === 0) {
		console.warn('No user data found in local storage.');
		return;
	}
	const user = {
		avatar: null,
		deptName: people.deptName,
		id: people.userId,
		name: people.userName,
		type: "user"
	};
	if (!_value.value) {
		_value.value = [user];
		console.log('Initialized _value with user data:', [user]);
	} else {
		console.log('User data already exists in _value:', _value.value);
	}
})

const orgPicker = ref()

function showOrgPicker() {
	if (!props.readonly) {
		orgPicker.value.show()
	}
}

function selectOk(val) {
	_value.value = val
}

const emits = defineEmits(['update:modelValue'])
</script>

<style scoped>
.text-color {
	width: 120rpx !important;
	color: #848484;
	/* padding-left: 60rpx; */
	font-size: 26rpx !important;
	text-align: right;
	margin-right: 10rpx;
	display: inline-block;
}

.flex-div {
	width: 100%;
	display: flex;
	flex-direction: row;
}

.flex-1-div {
	flex: 1;
	font-size: 1rem;
}

::v-deep .is-disabled {
	color: black;
	background-color: #fff !important;
}
</style>>